<template>
  <layout>
    <template #header>
      <div class="header-nav-bar">
        <div class="display-flex header-nav-bar-top">
          <div class="header-left">
            <van-image width="12.666667vw" height="8.8vw" :src="LOGO" />
          </div>
          <div class="header-search">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onRefresh">
              <template #action>
                <van-button round size="small" type="success" color="#ED1850" @click="onRefresh">搜索</van-button>
              </template>
            </van-search>
          </div>
          <div class="header-right">
            <van-image width="7.733333vw" height="7.066667vw" :src="customer" />
          </div>
        </div>
        <van-notice-bar left-icon="volume-o" color="#fff" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
      </div>
    </template>
   
    <div class="header-swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(banner) in banners">
          <van-image width="94.666667vw" height="23.466667vh" lazy-load :src="banner.image"  />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <dropdown-bar :menuList="dropdown.menuList" class="dropdown-bar" @change="changeDropdown"  />
    <product-navigation class="product-navigation" :menuList="menuList" @goRoute="goTypeDetail"/>
    <recommend class="product-recommend" />
    <divide-title />
    
      <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedText" @load="loadMore"
        class="van-list-box">
        <van-row justify="space-around" :gutter="[10, 10]">
          <ProductBox v-for="item in list" :key="item.id" :item="item"  @click="goDetail(item)" />
        </van-row>
      </van-list>
    </van-pull-refresh>
   
  </layout>
</template>

<script setup>
import { ref,onMounted, reactive } from 'vue';
import apis from '@/apis/ordergroup.js'
import { useRoute, useRouter} from 'vue-router'
import { showToast } from "vant"
import layout from '@/components/Layout/index.vue'
import ProductBox from '@/components/ProductBox/index.vue'
import DropdownBar from '@/components/DropdownBar/index.vue'
import ProductNavigation from '@/components/ProductNavigation/index.vue'
import recommend from './components/recommend.vue'
import DivideTitle from '@/components/DivideTitle/index.vue'

import customer from '@image/Home/customer.png'
import LOGO from '@image/Home/LOGO.png'
const router=useRouter()
let menuList = ref([])

let goBack = () => {
  history.go(-1);
}
const value = ref('');
let banners = ref([]);
let finishedText = ref('--END--');

const onClickButton = () => showToast(value.value);
let typeList = () => {
    
    
  try{
    apis.typeList({}).then((res)=>{
        if(res.code=='200'){
          menuList.value=res.data
        }else{
            showToast(res.msg);
        }
        
    })
  }catch(e){

  }
  
}
let bannerList = () => {
    
    
    try{
      apis.bannerList({}).then((res)=>{
          if(res.code=='200'){
            banners.value=res.data
          }else{
              showToast(res.msg);
          }
          
      })
    }catch(e){
  
    }
    
  }
let List = async () => {
    if(page.value==1){
      list.value=[]
      finished.value=false
    }
    
    let params={
      buy_asc: "",
      is_new: "",
      keyword: value.value,
      page: page.value,
      price_asc: "",
      row: 10
    }

  dropdown.menuList.forEach((item) => {
    if (item.value !== 'all') {
      if (item.clickCount > 0) {
        params[item.value] = item.clickCount;
      }
    }
  });
    
    try{
     await apis.List(params).then((res)=>{
          if(res.code=='200'){
            list.value=list.value.concat(res.data.data)
          }else{
              showToast(res.msg);
          }
          loading.value = false; 
          if(page.value==res.data.last_page){
            finished.value=true
          }
        
          
      })
    }catch(e){
  
    }
    
  }
  let onRefresh=()=>{
    page.value=1
    List()
  }
onMounted(() => {
  typeList()
  List()
  bannerList()
})

const list = ref([])
let page=ref(1)
let loading = ref(false);
let finished = ref(false);
let timer=ref(null)
let maxPage=ref(0)
let loadMore = () => {
  if(timer.value){
    clearTimeout(timer.value)
  }
  timer.value=setTimeout(()=>{
    page.value++;
    List()
   
  },500)
  
}


let dropdown = reactive({
  menuList: [
    {text: '默认', value: 'all', checked: true, clickCount:0 },
    { text: '价格', value: 'price_asc', checked: false, clickCount: 0 },
    { text: '销量', value: 'buy_asc', checked: false, clickCount: 0 },
    { text: '新品', value: 'is_new', checked: false, clickCount: 0 },
  ],
})
let changeDropdown = (item) => {

  if (item.value == 'all') {
    dropdown.menuList.forEach(v => {
      v.checked = false;
      v.clickCount=0
      if (v.value == item.value) {
        v.checked = true;
      }
    })
  } else {
    dropdown.menuList.forEach(v => {
      if (v.value == 'all') {
        v.checked = false;
      }
      if (v.value == item.value) {
        v.clickCount++;
        v.checked = true;
        if (v.clickCount === 3) {
          v.clickCount = 0
          v.checked = false;
        }
      }
    })
  }
  page.value=1
  List()
}
let goDetail=(item)=>{
  router.push({
        path: '/productDetails',
        query: {
            id: item.id
        }
    })
}
let goTypeDetail=(item)=>{
  router.push({
        path: '/goodsList',
        query: {
            id: item.id
        }
    })
}


</script>

<style lang="scss" scoped>
.header-nav-bar {
  height: 230px;
  background: linear-gradient(to right, var(--orange-color), var(--red-color));
  color: var(--white);

  :deep(.van-nav-bar__title) {
    color: var(--white);
  }

  ;

  :deep(.van-nav-bar) {
    background-color: transparent;
  }

  :deep(.van-notice-bar) {
    background-color: transparent;
  }

  :deep(.van-nav-bar .van-icon) {
    color: var(--white);
  }
}

.header-nav-bar-top {
  padding: 20px;
  margin-top: 20px;
}

.header-left {
  width: 95px;
  height: 80px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-right {
  width: 58px;
  height: 80px;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;

}

.header-search {
  border-radius: 60px;
  background-color: var(--white);
  flex: 1;
  overflow: hidden;
  height: 80px;
  margin: 0 20px;

  :deep(.van-search) {
    background-color: transparent;
    height: 80px;
  }

  :deep(.van-search__content) {
    background: var(--white);
  }

  :deep(.van-button) {
    width: 140px;
    margin-top: -4px;
  }

  :deep(.van-search__action) {
    background: var(--white);
  }
}

.my-swipe {
  margin-top: 20px;
}

.my-swipe .van-swipe-item {
  text-align: center;
}

.van-list-box {
  margin-top: 20px;
}

.header-swipe {}

.dropdown-bar,.product-navigation {
  margin-top: 20px;border-radius: 10px;
}
.product-recommend{margin-top: 20px;}

</style>